cascading style sheets guide

Integrating Style and Web Sites

We've had a thorough look at style sheets, what they are, how they work and why you might use them. We haven't discussed how a browser knows about a style sheet. If a style sheet contains the information to tell a browser how to draw a particular page, how does a browser know whether it should use a style sheet, and how to find it?

There are two ways that a style sheet can be associated with an HTML document.

First, the style sheet can be embedded in the head of an HTML document. We will look at how this is done shortly, but first, let's look at why this mightn't be the best approach.

We have made much of the site management capabilities of style sheets. We saw how a single style sheet can affect whole sites, and how changes to that style sheet affect every page linked to the style sheet. If we go and embed the style sheet in the head of the web document, we lose all of these advantages. We haven't really separated appearance from content much at all.

The second way, and as you can probably tell, the preferred way of associating web pages with style sheets is to link from the HTML file to the style sheet.

With this link, when the browser begins reading the page, it sees the style sheet link, and downloads the style sheet, then uses the style sheet to draw the page.

You can in fact place several links in a HTML file. This does not mean that a browser uses each of them, as though they imported one another. Rather, the browser chooses one of these as the style sheet to use (theoretically, the browser should ask the user which style sheet to use).

Embedding Style Sheets

Style sheets can be embedded into the HEAD of HTML documents. The style sheet itself is placed between a style tag like this:

Linking to Style Sheets

Take note here that the web page links to the style sheet. The style sheet has no knowledge of the pages which are linked to it.

To link a web page (HTML document) to a style sheet, you place a link to the style sheet, using the following syntax:

The HREF is either a relative or absolute url. Remember, the relative url is relative to the document, unlike URLs in style sheets which are relative to the style sheet.

Let's take a look at each attribute briefly.

REL="STYLESHEET" this says that it is a forward link, and tells the browser what to expect at the other end, namely a style sheet.

TYPE="text/css" Theoretically, style sheets might be written using any number of languages. The style sheets we've been talking about in these lessons are Cascading Style Sheets (CSS). Extensible Style Language (XSL) is another that may become important. This attribute tells the browser what format it is going to receive the style sheet in. The content type is necessary.

HREF="core-styles.css" tells the browser where to locate the style sheet. The destination is specified in the same way that hypertext link (A HREF="link destination") destinations are, with either a relative or absolute URL.

In this part

In this part we looked at how to actually make your style sheet work in web pages.

We are rapidly drawing to a close. To really help you master style, our last installment covers some advanced concepts and issues that you might like to be aware of.

cascading style sheets guide

Integrating Style and Web Sites

Embedding Style Sheets

Linking to Style Sheets

In this part

Next